<script setup>
import ListApis from '@/apis/list.js'

import config from "@/config/index.js";
import RightIcon from "@/components/common/RightIcon.vue";
import useUserStore from '@/stores/user.js'
import useCookieStore from '@/stores/cookieStorage.js'
import MaterialApis from "@/apis/material.js";
import {ElMessage} from "element-plus";
import {useRouter,useRoute} from "vue-router";
import VideoApis from "@/apis/video.js"
import {ChatDotRound, Lock} from "@element-plus/icons-vue";
import {secondFormat} from "@/utils/format.js";
import PackageApis from '@/apis/package.js'


const router = useRouter()
const route = useRoute()
const industriesAndExams = ref([])
const industries = ['jiangonglei', 'caikuailei', 'zhicheng']
const activeIndex = ref(0)
const userStore = useUserStore();
const cookieStore = useCookieStore();
const freeGrade = [{
  name: '免费'
}, {
  name: '付费班级独享'
}]
const gradeActiveIndex = ref(0)
const activeIndex1 = ref(0)

const select1 = ref(null)
const options1 = ref([])
const isLogin = computed(() => {
  return cookieStore.isLogin;
})

const drawer = ref(false)
const drawer1 = ref(false)
const packageList = ref([])
const resources = ref([])
const videoList = ref([])
const elTreeNode = ref(null)
const loading = ref(false)
const haveInitialized = ref(false)
const currentCategory = computed(() => {
  if (industriesAndExams.value.length && industriesAndExams.value[activeIndex.value].children && industriesAndExams.value[activeIndex.value].children.length && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex] && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children) {

    return industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex]
  }
})
const currentColumn = computed(() => {
  if (industriesAndExams.value.length && industriesAndExams.value[activeIndex.value].children.length && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children.length && industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children) {
    return industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].activeIndex]
  }
})


async function init() {
  const industryRes = await getIndustries();
  industriesAndExams.value = industryRes.data.filter(item => industries.includes(item.id));
  if (industriesAndExams.value.length) {
    if(!route.query.examId){
      getExams(industriesAndExams.value[0].id).then(res => {


        industriesAndExams.value[0].children = res.data
        industriesAndExams.value[0].activeIndex = 0

        if (!res.data.length) return;
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[0].id,
          }
        }).then(res1 => {
          industriesAndExams.value[0].children[0].activeIndex = 0
          industriesAndExams.value[0].children[0].children = res1.data
          if (!res1.data.length) {
            haveInitialized.value = true
            return;
          }
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 3,
            }
          }).then(res2 => {
            industriesAndExams.value[0].children[0].children[0].activeIndex = 0
            industriesAndExams.value[0].children[0].children[0].children = res2.data

            if (res2.data.length) {
              VideoApis.chapterList({
                params: {
                  industryCode: industriesAndExams.value[0].id,
                  examId: industriesAndExams.value[0].children[0].id,
                  categoryId: industriesAndExams.value[0].children[0].children[0].id,
                  columnId: res2.data[0].id,
                }
              }).then(res => {
                videoList.value = res.data.map(e => {
                  return {
                    ...e,
                    isLeaf: false,
                    topChapterId: e.id
                  }
                })
              }).finally(() => {
                haveInitialized.value = true
              })
            }
            haveInitialized.value = true
          })
        })
      })
    }else{
      let industryIndex;
      const item = industriesAndExams.value.find((item,index) => {
        if(item.id == route.query.industryId){
          industryIndex=index;
          return true;
        }
      })

      activeIndex.value=industryIndex

      getExams(item.id).then(res => {


        industriesAndExams.value[industryIndex].children = res.data
        industriesAndExams.value[industryIndex].activeIndex = res.data.findIndex(e=>{
          return e.id == route.query.examId;
        })

        if (!res.data.length) return;
        //  获取科目
        ListApis.leafListPc({
          params: {
            examId: res.data[industriesAndExams.value[industryIndex].activeIndex].id,
          }
        }).then(res1 => {
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].activeIndex = 0
          industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children = res1.data
          if (!res1.data.length) {
            haveInitialized.value = true
            return;
          }
          ListApis.columnByCategory({
            params: {
              categoryId: res1.data[0].id,
              columnPosition: 'JGQY',
              type: 3,
            }
          }).then(res2 => {
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].activeIndex = 0
            industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].children = res2.data

            if (res2.data.length) {
              VideoApis.chapterList({
                params: {
                  industryCode: industriesAndExams.value[industryIndex].id,
                  examId: industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].id,
                  categoryId: industriesAndExams.value[industryIndex].children[industriesAndExams.value[industryIndex].activeIndex].children[0].id,
                  columnId: res2.data[0].id,
                }
              }).then(res => {
                videoList.value = res.data.map(e => {
                  return {
                    ...e,
                    isLeaf: false,
                    topChapterId: e.id
                  }
                })
              }).finally(() => {
                haveInitialized.value = true
              })
            }
            haveInitialized.value = true
          })
        })
      })
    }
  }
}

function load(node, resolve) {
  if (node.level != 0) {
    if (node.data.leaf) {
      VideoApis.list({
        params: {
          ChapterId: node.data.id,
          industryCode: industriesAndExams.value[activeIndex.value].id,
          examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
          categoryId: currentCategory.value.id,
          columnId: currentColumn.value.id
        }
      }).then(res => {
        resolve(res.data.map(e => {
          e.topChapterId = node.data.topChapterId
          e.isLeaf = true
          e.doPercent = (e.watchDuration / e.duration) * 100
          e.watchTime = secondFormat(e.watchDuration)
          e.totalTime = secondFormat(e.duration)
          return e
        }))
      })

    } else {
      ListApis.childChapter({params: {pid: node.data.id}}).then(async res => {
        resolve(res.data.map(e => {
          return {
            ...e,
            topChapterId: node.data.topChapterId,
            isLeaf: false,
          }
        }))
      })
    }
  }
  resolve([])
}

function getExams(industryId) {
  return ListApis.examByIndustry({
    params: {
      size: 1000,
      industryId,
    },
  })
}

function getIndustries() {
  return ListApis.industryList()
}

function toggleGrade(index) {
  gradeActiveIndex.value = index
//   筛选是否免费
}

function toggleIndex(index) {
  if (activeIndex.value == index) return;
  activeIndex.value = index
  if (industriesAndExams.value[index].children) {
    industriesAndExams.value[index].activeIndex = 0

    if (industriesAndExams.value[index].children.length)
      industriesAndExams.value[index].children[0].activeIndex = 0;
    if (industriesAndExams.value[index].children[0].children && industriesAndExams.value[index].children[0].children.length) {
      industriesAndExams.value[index].children[0].children[0].activeIndex = 0
      // 获取栏目下视频
      VideoApis.chapterList({
        params: {
          industryCode: industriesAndExams.value[index].id,
          examId: industriesAndExams.value[index].children[0].id,
          categoryId: currentCategory.value.id,
          columnId: currentColumn.value.id,
        }
      }).then(res => {
        videoList.value = res.data.map(e => {
          return {
            ...e,
            isLeaf: false,
            topChapterId: e.id
          }
        })
      })
    }
    return;
  }
  getExams(industriesAndExams.value[index].id).then(res => {
    industriesAndExams.value[index].children = res.data
    industriesAndExams.value[index].activeIndex = 0

    if (!res.data.length) return;
    //  获取科目
    ListApis.leafListPc({
      params: {
        examId: res.data[0].id,
      }
    }).then(res1 => {
      industriesAndExams.value[index].children[0].activeIndex = 0
      industriesAndExams.value[index].children[0].children = res1.data
      if (!res1.data.length) return;
      ListApis.columnByCategory({
        params: {
          categoryId: res1.data[0].id,
          columnPosition: 'JGQY',
          type: 3,
        }
      }).then(res2 => {
        industriesAndExams.value[index].children[0].children[0].activeIndex = 0
        industriesAndExams.value[index].children[0].children[0].children = res2.data
        if (res2.data.length) {
          VideoApis.chapterList({
            params: {
              industryCode: industriesAndExams.value[index].id,
              examId: industriesAndExams.value[index].children[0].id,
              categoryId: currentCategory.value.id,
              columnId: currentColumn.value.id,
            }
          }).then(res => {
            videoList.value = res.data.map(e => {
              return {
                ...e,
                isLeaf: false,
                topChapterId: e.id
              }
            })
          })
        }

      })
    })
  })
}

function toggleExam(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index

  if (item.children[index].children) {
    item.children[index].activeIndex = 0
    if (item.children[index].children.length) {
      item.children[index].children[0].activeIndex = 0;
      VideoApis.chapterList({
        params: {
          industryCode: industriesAndExams.value[activeIndex.value].id,
          examId: item.children[index].id,
          categoryId: item.children[index].children[0].id,
          columnId: item.children[index].children[0].children[0].id,
        }
      }).then(res => {
        videoList.value = res.data.map(e => {
          return {
            ...e,
            isLeaf: false,
            topChapterId: e.id
          }
        })
      })
    }

    return
  }
  ;
  ListApis.leafListPc({
    params: {
      examId: item.children[index].id,
    }
  }).then(res1 => {
    // 重置科目
    item.children[index].activeIndex = 0
    item.children[index].children = res1.data
    if (!res1.data.length) return;
    // 重置栏目
    item.children[index].children[0].activeIndex = 0

    ListApis.columnByCategory({
      params: {
        categoryId: item.children[index].children[0].id,
        columnPosition: 'JGQY',
        type: 3,
      }
    }).then(res2 => {
      item.children[index].children[0].children = res2.data
      if (res2.data.length) {
        VideoApis.chapterList({
          params: {
            industryCode: industriesAndExams.value[activeIndex.value].id,
            examId: item.children[index].id,
            categoryId: item.children[index].children[0].id,
            columnId: res2.data[0].id,
          }
        }).then(res => {
          videoList.value = res.data.map(e => {
            return {
              ...e,
              isLeaf: false,
              topChapterId: e.id
            }
          })
        })
      }

    })
  })
}

function toggleCategory(index, item) {
  if (item.activeIndex == index) return;
  item.activeIndex = index
  if (item.children[index].children) {
    item.children[index].activeIndex = 0

    VideoApis.chapterList({
      params: {
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: item.children[index].id,
        columnId: item.children[index].children[0].id,
      }
    }).then(res => {
      videoList.value = res.data.map(e => {
        return {
          ...e,
          isLeaf: false,
          topChapterId: e.id
        }
      })
    })
    return
  }
  ;
  ListApis.columnByCategory({
    params: {
      categoryId: item.children[index].id,
      columnPosition: 'JGQY',
      type: 3,
    }
  }).then(res2 => {
    item.children[index].activeIndex = 0
    item.children[index].children = res2.data

    VideoApis.chapterList({
      params: {
        industryCode: industriesAndExams.value[activeIndex.value].id,
        examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
        categoryId: item.children[index].id,
        columnId: res2.data[0].id,
      }
    }).then(res => {
      videoList.value = res.data.map(e => {
        return {
          ...e,
          isLeaf: false,
          topChapterId: e.id
        }
      })
    })
  })
}

function toggleColumn(index, item) {
  item.activeIndex = index
  VideoApis.chapterList({
    params: {
      industryCode: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      categoryId: item.id,
      columnId: item.children[index].id,
    }
  }).then(res => {
    videoList.value = res.data.map(e => {
      return {
        ...e,
        isLeaf: false,
        topChapterId: e.id
      }
    })
  })
}

function toggleIndex1(index) {
  activeIndex1.value = index
}

function download(row) {
  VideoApis.addFrequency({
    id: row.id
  })
  fetch(config.prefix_image + row.url, {
    method: 'GET',
  })
      .then(response => response.blob())
      .then(blob => {
        // 创建一个虚拟的链接元素，模拟点击下载
        const link = document.createElement('a');
        link.style.display = 'none';
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = row.name;
        document.body.appendChild(link);

        // // 模拟点击
        link.click();
        // // 移除虚拟链接元素
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url)
      })
}

function goCourse() {
// 我已购买的课程
  router.push({
    path:"/mine/index"
  })
}

function like(item) {
  MaterialApis.updateLike({
    id: item.id,
    type: 0,
    categoryId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].children[industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].activeIndex].id
  }).then(res => {

    ElMessage({
      message: "点赞成功",
      type: "success"
    })
  })
}

function previewPdf(item) {
  if (item.attachmentInfos[0].path.indexOf(".pdf") == -1) {
    ElMessage({
      message: "暂不支持非pdf预览",
      type: "warning"
    })
    return;
  }
  window.open(config.prefix_image + item.attachmentInfos[0].path, "_blank")
}

function formatTime(percentage, data) {
  return data.totalTime + '/' + data.watchTime;
}

function activeColumn() {
  packageList.value = []
//   应该是包含该栏目的套餐，
  PackageApis.getPackagesWithColumn({
    examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
    categoryId: currentCategory.value.id,
    columnId: currentColumn.value.id
  }).then(res => {
    res.data.forEach((item1, index) => {
      item1.cover = item1.cover || '/测试用的图片/2.jpg'
    })
    packageList.value = res.data;
    drawer1.value = true
  })
}

function showResource(nodeData, props) {
  VideoApis.handoutList({
    params: {
      videoId: nodeData.id
    }
  }).then(res => {
    resources.value = res.data
    drawer.value = true
  })
}

function preview(row) {
  window.open(config.prefix_image + row.url)
}

function goToPlay(nodeData, props1) {
  router.push({
    path: `/courseVideo/chapter/videos`, query: {
      vid: nodeData.aliyunVideoId,
      columnId: currentColumn.value.id,
      topChapterId: nodeData.topChapterId,
      videoId: nodeData.id,
      watchDuration: nodeData.watchDuration
    }
  })
}

function goToPackage(item1) {
  router.push({
    path: '/buyCenter/package/index',
    query: {
      packageId: item1.id,
      industryId: industriesAndExams.value[activeIndex.value].id,
      examId: industriesAndExams.value[activeIndex.value].children[industriesAndExams.value[activeIndex.value].activeIndex].id,
      ...item1
    }
  })

}

function goToBuy(item) {
//   跳转考试下套餐页面
  router.push({
    path: "/",
    hash: "#industry" + activeIndex.value,
    query: {
      industryIndex: activeIndex.value,
      // industryIndex:2,
      examIndex: industriesAndExams.value[activeIndex.value].activeIndex,
      // examIndex:0,
    }
  })
}

function goToLogin(){
  router.push('/login')
}
init()


</script>

<template>
  <div class="video-container">
    <div class="top1"></div>
    <div class="content1">
      <div class="the-left">
        <div class="the-box1">
          <div class="aa">
            <div class="bb">大类</div>
            <div class="cc">
              <div @click="toggleIndex(index)" v-for="(item,index) in industriesAndExams" :key="index" class="dd"
                   :class="{active:activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">考试</div>
            <div class="cc" v-if="industriesAndExams[activeIndex]">
              <div @click="toggleExam(index,industriesAndExams[activeIndex])"
                   v-for="(item,index) in industriesAndExams[activeIndex].children" :key="index" class="dd"
                   :class="{active:industriesAndExams[activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>

          </div>
          <div class="aa">
            <div class="bb">科目</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]">
              <div
                  @click="toggleCategory(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">类型</div>
            <div class="cc"
                 v-if="industriesAndExams[activeIndex]&&industriesAndExams[activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex]&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children&&industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex]">
              <div
                  @click="toggleColumn(index,industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex])"
                  v-for="(item,index) in industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].children"
                  :key="index" class="dd"
                  :class="{active:industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].children[industriesAndExams[activeIndex].children[industriesAndExams[activeIndex].activeIndex].activeIndex].activeIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="aa">
            <div class="bb">等级</div>
            <div class="cc">
              <div @click="toggleGrade(index)" v-for="(item,index) in freeGrade" :key="index" class="dd"
                   :class="{active:gradeActiveIndex==index}">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="show-active-btn-container">
          <el-button v-if="haveInitialized&&currentColumn&&!currentColumn.soldFlag" class="activeBtn" type="primary"
                     @click="activeColumn" style="float: right">激活
          </el-button>
        </div>
        <div class="the-box21">
          <div class="tree-container">
            <el-tree ref="elTreeNode" :icon="RightIcon" node-key="id" v-loading="loading" :data="videoList" :load="load"
                     lazy
                     :props="{ label: 'name', isLeaf: 'isLeaf' }" :height="408">
              <template #default="{ node, data }">
                <div class="chapter-video-item" :class="{
            leaf: data.isLeaf,
          }">
                  <div class="name chapterWrap" v-if="!data.isLeaf">
                    <span>{{ data.name }}</span>
                  </div>
                  <div class="chapterWrap-flex" v-else>
                    <div class="name chapterWrap">
                      <span>{{ data.name }}</span>
                    </div>
                    <div class="info-icon">
                      <el-tooltip :content="data.name"
                                  trigger="click"
                                  placement="top-start">
                        <ChatDotRound/>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="my-progress-container" v-if="data.isLeaf">

                    <el-progress :text-inside="true" :format="(v)=>formatTime(v,data)" striped :stroke-width="26"
                                 :percentage="data.doPercent"/>
                  </div>

                  <div v-if="data.isLeaf" class="">
                    <div v-if="currentColumn&&currentColumn.soldFlag">
                      <el-button type="primary" @click="showResource(data, node)" text>
                        资料
                      </el-button>
                      <el-button type="primary" @click="goToPlay(data, node)" text>
                        播放
                      </el-button>
                    </div>
                    <div v-else>
                      <el-button plain>
                        <svg t="1746607917331" class="icon" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="5797" width="20" height="20">
                          <path
                              d="M765.604952 364.063693l-42.267663 0 0-84.535325c0-116.65793-94.679359-211.337289-211.337289-211.337289s-211.337289 94.679359-211.337289 211.337289l0 84.535325-42.267663 0c-46.705742 0-84.535325 37.829584-84.535325 84.535325l0 422.674579c0 46.705742 37.829584 84.535325 84.535325 84.535325l507.209904 0c46.705742 0 84.535325-37.829584 84.535325-84.535325L850.140277 448.599018C850.140277 401.893276 812.310693 364.063693 765.604952 364.063693zM512 744.470609c-46.705742 0-84.535325-37.829584-84.535325-84.535325 0-46.705742 37.829584-84.535325 84.535325-84.535325s84.535325 37.829584 84.535325 84.535325C596.534302 706.642049 558.705742 744.470609 512 744.470609zM643.029242 364.063693 380.970758 364.063693l0-84.535325c0-72.27714 58.752102-131.029242 131.029242-131.029242S643.029242 207.251228 643.029242 279.528368L643.029242 364.063693z"
                              p-id="5798" fill="#bfbfbf"></path>
                        </svg>
                      </el-button>
                    </div>
                  </div>
                </div>
              </template>
            </el-tree>

          </div>
        </div>
      </div>
      <div class="the-right">


        <div class="the-right-box2">
          <div class="the-right-box2-left" @click="goToLogin">
            <img src="@/assets/images/person.svg" v-if="!isLogin">
            <img :src="userStore.userInfo.header" v-else>
            <span v-if="!isLogin">未登录</span>
          </div>
          <div class="the-right-box2-right" @click="goCourse">
            我的课程
          </div>
        </div>
      </div>
    </div>
    <el-drawer v-model="drawer" direction="rtl" size="40%">
      <el-table :data="resources">
        <el-table-column label="文件名" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="{ row }">
            <div>
              <el-button type="primary" @click="download(row)">下载</el-button>
              <el-button type="primary" @click="preview(row)">预览</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <el-drawer v-model="drawer1" direction="rtl" size="40%">
      <div>
        <h1>
          包含该课程的套餐
        </h1>
        <div class="package-card-container">
          <el-scrollbar height="700">
            <div v-for="(item1,index1) in packageList" :key="index1"
                 class="b radius-12">
              <div v-if="item1">
                <div class="top-left-tip">

                </div>

                <div class="top-right-tip"
                >

                </div>
                <p class="class-name">{{ item1.name }}</p>
                <p class="class-info">
                  <img :src="item1.cover">
                </p>

                <div>
                  <el-tag v-for="(item2,index2) in item1.tagNameList" :key="index2" type="primary">{{ item2 }}</el-tag>
                </div>
                <div class="price-and-btn">
                  <div><span class="unit">￥</span><span class="price">{{ item1.price / 100 }}</span></div>
                  <el-button type="primary" round @click="goToPackage(item1)">立即领取</el-button>
                </div>
              </div>
              <img v-else src="@/assets/images/empty2.png" class="empty-img">
            </div>
          </el-scrollbar>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
@media screen and (min-width: 1400px) {
  .content1{
    width: 1400px;
  }
}
.video-container {

}

.top1 {
  height: 130px;
  background: blue;
}

.content1 {
  margin: 0 auto;
  gap: 26px;
  display: flex;
  padding-top: 50px;
}

.the-title1 {
  height: 50px;
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  padding: 10px 0;
  box-sizing: border-box;
}


.the-left {
  flex: 1;
}

.the-box1 {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 330px;
}

.the-box1 .aa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;

}

.the-box1 .aa .bb {
  width: 80px;
}

.the-box1 .aa .dd {
  padding: 2px 10px;
  cursor: pointer;
}

.the-box1 .aa .dd:hover {
  color: #409eff;
}

.the-box1 .aa .dd.active {
  border-radius: 100px;
  background: linear-gradient(180deg, #E6EFFF 0%, #FFF 100%);
  color: #409eff;
}

.the-box1 .aa .cc {
  flex: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.the-right {
  width: 345px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chapter-video-item.leaf {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.chapter-video-item.leaf .chapterWrap {
  position: relative;
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chapterWrap-flex {
  display: flex;
}

.info-icon {
  width: 12px;
  height: 12px;
  align-self: start;
}

.my-progress-container {
  width: 300px;
}

.tree-container ::v-deep(.el-tree-node__content) {
  height: 40px;
  line-height: 40px;
}

.tree-container {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
}

.show-active-btn-container {
  box-sizing: border-box;
  height: 50px;
  padding: 10px;
}

.the-box21 {

  background: white;
  border-radius: 12px;
}

.activeBtn {
  background: #ffa417;
  box-shadow: 0 .25rem .42rem 0 #ffcb7a;
  border: none;
}

.radius-12 {
  border-radius: 12px;

  box-shadow: 0px 4px 20.4px 0px rgba(60, 108, 255, 0.11);
  box-sizing: border-box;
  position: relative;
  padding: 16px 16px 0px 16px;
}

.radius-12 + .radius-12 {
  margin-top: 26px;
}

.b {
  width: 335px;
  height: 300px;
  background: white;
}

.top-left-tip {
  position: absolute;
  top: 0;
  left: 0;
  background: #E8EFFF;
  color: #3C6CFF;

}

.class-name {
  color: #333;
  font-size: 17.438px;
  font-weight: 700;
  line-height: 25px;
}

.class-info {
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  word-break: break-all;
  min-height: 100px;
}

.class-info img {
  width: 200px;
  height: 125px;
}

.price-and-btn {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-and-btn .tabs {
  flex: 1;
  padding-right: 16px;
}

.price-and-btn .tabs .tab {
  padding: 3px;
  background-image: linear-gradient(90deg, #CDD9FF 0%, #E9F6FF 100%);
}

.price {
  font-weight: 400;
  font-size: 24px;
}

.unit, .price {
  color: red;
}

.package-card-container {

}
.the-right-box2 {
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.the-right-box3{
  background: white;
  padding: 32px 24px;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.the-right-box2-left {
  display: flex;
  gap: 16px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  align-items: center;
}

.the-right-box2-left img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.the-right-box2-right {
  cursor: pointer;
  color: #3C6CFF;
  font-size: 14px;
  font-weight: 400;
}
</style>
